<template>
    <div class="main" style="height: 100%; width: 100%;">
    <div class="main0">
     <div class="main_left">
        <img src="@/assets/image/login-image-3.png" class="theimg"/>
        <img src="@/assets/image/login-image-2.png" class="secimg"/>
        <img src="@/assets/image/login-image-1.png" class="firimg"/>
     </div>
     <div class="main_right">
        <div class="main_r_up">
            <img src="@/assets/image/user.png" />
            <div class="pp">登录</div>
        </div>
        <div class="sub"><p>还没有账号？<a href="zhuce.html"><span class="blue">立即注册</span></a></p></div>
        <div class="txt">
            <span style="letter-spacing:8px;">用户名:</span>
            <input name="" type="text" class="txtphone" placeholder="请输入注册手机号或用户名" v-model="user.username" value="admin"/>
        </div>
        <div class="txt">
            <span style="letter-spacing:4px;">登录密码:</span>
            <input name="" type="text" class="txtphone" placeholder="请输入登录密码" v-model="user.password" value="123"/>
        </div>
        <div class="txt">
            <span style=" float:left;letter-spacing:8px;">验证码:</span>
            <input name="" type="text" class="txtyzm" placeholder="请输入页面验证码" v-model="yzm"/>&nbsp;&nbsp;&nbsp;
            <img :src="codeImage" @click="ShowYzm()" class="yzmimg"/><p @click="ShowYzm()">看不清?换一张</p>
        </div>
        <br>
        <br>
        <br>
        <div class="xiayibu" @click="logins">登录</div>
     </div>
  </div>
</div>

</template>

<script>
import {login,login1,ShowImage} from '@/api/login'
export default {
    data(){
        return{
            user:{
                username:"admin",
                password:"123"
            },
            yzm:"",
            codeImage:"",
            codeValue:""
        }
    },
    created(){
        this.ShowYzm();
    },
    methods:{
        async logins(){
            if(this.user.username.trim()==''||this.user.password.trim()==''){
                this.$message.error("请输入内容")
                return
            }
            if(this.yzm.trim()==''){
                this.$message.error("请输入图片验证码")
            }else{
                const areEqual = this.yzm.toLowerCase() === this.codeValue.toLowerCase();
                if(!areEqual){
                    this.$message.error("图片验证码错误")
                }else{
                    const res=await login(this.user)
                    console.log(res.data)
                    if(res.code===200){
                    localStorage.setItem('user', JSON.stringify(res.data)); // 存储用户信息到浏览器
                    const ress=localStorage.getItem("user")
                    console.log(ress)
                    this.$message.success("登录成功")
                    this.$router.push("/")
                    }else{
                    this.$message.error(res.msg)
                    }
                }
            }
        },
        async ShowYzm(){
            const res=(await ShowImage()).data
            console.log(res)
            this.codeImage = `data:image/png;base64,${res.codeImage}`;
            this.codeValue=res.codeValue
        },
    }

}
</script>

<style>
@charset "utf-8";
/* CSS Document */

*{ margin:0; padding:0}
body{ font-family:"微软雅黑";width:100%; min-width:1200px; overflow:hidden}
ul li{ list-style:none}
.blue{ color:#31acfb}
a{ text-decoration:none}
.main{ width:100%; background:url(@/assets/image/bk-login.png) no-repeat; background-size:100% 100%; overflow:hidden}
.main0{ width:1200px; height:540px; background:#fff; margin:0 auto; margin-top:140px;}
.main_left{ float:left; width:647px; position:relative}
.main_left img{ position:absolute}
.theimg{ top:90px; left:270px}
.secimg{top:90px; left:200px}
.firimg{top:90px; left:56px}

.main_right{ width:456px; height:386px; float:right; padding-right:36px;}
.main_r_up{ height:74px;padding-top:20px;}
.main_r_up img{ float:left}
.main_r_up .pp{ float:left;height:74px; line-height:74px; font-size:18px; color:#333; padding-left:20px;letter-spacing:9px;}
.sub{ width:456px; height:30px; font-size:14px; color:#666; border-bottom:1px solid #cccccc;}
.sub p{ float:right}
.txt{ width:456px; height:40px; margin-top:35px}
.txt span{ width:90px; font-size:14px; color:#666; height:40px; line-height:40px;}
.txt input{height:40px; border:1px solid #ccc; padding-left:20px; margin-left:20px}
.txt input.txtphone{ width:240px; }
.txt input.txtyzm{width:140px; float:left}
.txt img.yzmimg{ float:left; margin-left:15px}
.xieyi{ clear:both;padding-left:110px; padding-top:35px; font-size:14px; color:#5a5a5a; height:30px; line-height:30px}
.xiayibu{ width:260px; height:40px; line-height:40px; text-align:center; color:#fff; background:#30adfa; font-size:14px; border-radius:5px; margin-left:110px; margin-top:20px; cursor:pointer}

.footer{ width:100%; height:60px; line-height:60px; position:fixed; bottom:0; background:url(@/assets/image/footerBg.png);background-color: transparent;}
.footer0{ width:1200px; height:60px; margin:0 auto; font-size:14px; color:#adacac}
.footer_l{ float:left}
.footer_r{ float:right}
</style>